<template>
  <div class="qiuqiu">
    <div class="q-q-bg">
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle id="arc1" class="circle" cx="100" cy="100" r="80" opacity=".89" fill="none" stroke="#632b26"
          stroke-width="8" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc2" class="circle" cx="100" cy="100" r="80" opacity=".49" fill="none" stroke="#632b26"
          stroke-width="6" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc3" class="circle" cx="100" cy="100" r="67" opacity=".49" fill="none" stroke="#632b26"
          stroke-width="15" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc4" class="circle" cx="100" cy="100" r="90" opacity=".49" fill="none" stroke="#632b26"
          stroke-width="20" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc5" class="circle" cx="100" cy="100" r="67" opacity=".89" fill="none" stroke="#632b26"
          stroke-width="6" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc6" class="circle" cx="100" cy="100" r="60" opacity=".49" fill="none" stroke="#632b26"
          stroke-width="11" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc7" class="circle" cx="100" cy="100" r="30" opacity=".89" fill="none" stroke="#632b26"
          stroke-width="5" stroke-linecap="square" stroke-opacity=".99213" paint-order="fill markers stroke"></circle>
        <circle id="arc8" class="circle" cx="100" cy="100" r="55" opacity=".79" fill="#4DD0E1" fill-opacity="0"
          stroke="#632b26" stroke-width="6" stroke-linecap="square" stroke-opacity=".99213"
          paint-order="fill markers stroke"></circle>
      </svg>
      <div class="round">
        <div class="circle-ss"><a>{{ labelName }}<br>{{ labelValue }}</a></div>
        <div class="circle-ss-bottom2 animation2 "></div>
        <div class="circle-ss-bottom animation "></div>
      </div>
    </div>
  </div>
</template>


<script setup>
const props = defineProps(['labelName', 'labelValue'])
</script>

<style lang="scss" scoped>
.qiuqiu {

  .q-q-bg {
    background-color: #103657;
    margin-top: 5px;
    border: #1380bd solid 2px;
    border-radius: 15%;
  }

  .round {
    position: absolute;
    padding: 19px;
    margin-left: 31px;
    margin-top: -173px;
  }

  .circle-ss a {
    font-size: 18px;
    line-height: 22px;
    color: #8ef71d;
    font-weight: bold;
  }

  // 变大
  .circle-ss:hover {
    animation: donghua 2s infinite;
    -webkit-animation: donghua 2s infinite;
    background: #0a8af3;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    text-align: center;
    top: 24px;
    left: 24px;

    a {
      font-size: 20px;
      line-height: 40px;
      color: #ffffff;
      font-weight: bold;
    }
  }

  .circle-ss {
    width: 80px;
    height: 80px;
    // background: #3a96e1;
    // background: #4e8dbf;
    background: #103657;
    border-radius: 100%;
    z-index: 999;
    text-align: center;
    top: 28px;
    left: 28px;
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-animation: twinklingss 5.1s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation: twinklingss 5.1s infinite;
    animation-fill-mode: both;
  }

  .circle-ss-bottom {
    border-radius: 100%;
    z-index: 401;
    position: absolute;
    top: 28px;
    left: 28px;
  }

  .animation {
    -webkit-animation: twinkling 2.1s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation: twinkling 2.1s infinite;
    animation-fill-mode: both;
  }

  .circle-ss-bottom2 {
    width: 100px;
    height: 100px;
    background: #3a96e1;
    border-radius: 100%;
    filter: alpha(opacity=20);
    z-index: 401;
    position: relative;
  }

  .animation2 {
    -webkit-animation: twinkling 2.1s infinite ease-in-out;
    animation: twinkling 2.1s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  @keyframes bianse {
    0% {
      // opacity: 0.5;
      stroke: #e1a34d;
    }

    50% {
      stroke: #3a96e1;
      // opacity: 0.9;
    }

    100% {
      stroke: #8ef71d;
    }
  }

  @keyframes donghua {
    0% {
      opacity: 0.5;
    }

    50% {
      opacity: 0.9;
    }

    100% {
      opacity: 0.5;
    }
  }

  @keyframes twinkling {
    0% {
      opacity: 0.1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 0.1;
    }
  }

  @keyframes twinklingss {
    0% {
      opacity: 0.5;
    }

    50% {
      opacity: 0.9;
    }

    100% {
      opacity: 0.5;
    }
  }

  svg {
    // position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  svg circle {
    stroke: #4dd0e1;
    -webkit-animation: bianse 10s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation: bianse 10s infinite;
    animation-fill-mode: both;
  }

  .circle {
    transform-origin: center;
  }

  #arc1 {
    stroke-dasharray: 18;
    stroke-dashoffset: 6;
    animation: 6.5s -2s rota infinite linear;
  }

  #arc3 {
    stroke-dasharray: 267;
    stroke-dashoffset: 267;
    animation: 11s 1s rota infinite linear;
  }

  #arc4 {
    stroke-dasharray: 267;
    stroke-dashoffset: 267;
    animation: 6s 1s rota infinite linear reverse;
  }

  #arc5 {
    stroke-dasharray: 267;
    stroke-dashoffset: 267;
    animation: 4s 1s rota infinite linear;
  }

  #arc6 {
    stroke-dasharray: 267;
    stroke-dashoffset: 267;
    animation: 7s 1s rota infinite linear alternate;
  }

  #arc7 {
    stroke-dasharray: 267;
    stroke-dashoffset: 267;
    animation: 3s 1s rota infinite linear reverse;
  }

  text {
    fill: #ffffff;
    font: bold 24px sans-serif;
  }

  @keyframes rota {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
</style>>
